<template>
	<view class="container">
		<TopNav title="问题反馈" bg-color="#fff"></TopNav>
		<view class="header flex justify-center">
			<subsection :list="sectionList" width="240" v-model="sectionCurrent" @change="handleSecionChange">
			</subsection>
		</view>
		<view class="main bottom-button" v-show="sectionCurrent == 0">
			<FormSelect title="反馈类型" :value="pickerValue" placeholder="请选择反馈的类型" picker-title="请选择反馈类型" class="m-t11"
				@confirm="handlePickerConfirm">
				<view class="p-tb16">
					<van-picker :columns="columns" :default-index="currentPicker" value-key="name"
						@change="handlePickerChange" />
				</view>
			</FormSelect>
			<FormInput title="反馈内容" placeholder="请填写问题描述或建议" v-model="form.content" type="textarea" class="m-t11">
			</FormInput>
			<view class="bg-white radius-6 p-lr16 p-t13 p-b12 m-t10" style="border: 1rpx solid #DDE0E6;">
				<view class="">
					<text class="f-w600 f-s15 line-height22">图片</text>
				</view>
				<view class="m-t8">
					<text class="f-s12 f-w400 text-gray line-height17">最多上传3张图片，总大小不超过50M</text>
				</view>
				<view class="m-t10">
					<UploadImage width="210rpx" height="210rpx" :limit="3" multiple v-model="form.images">
						<view class="upload-image">
							<image src="/static/images/login/photo.png" class="width-28" mode="widthFix"></image>
							<text class="m-t8 text-gray f-s12">上传图片</text>
						</view>
					</UploadImage>
				</view>
			</view>
			<view class="m-t10 line-height20 text-gray f-s14 flex flex-direction">
				<text>提交后，您可以在反馈记录中查看进度及处理结果</text>
			</view>
		</view>
		<view class="fixed-bottom bg-white p-lr16" v-show="sectionCurrent === 0">
			<view class="self-btn full-width m-t6" hover-class="pressed" @click="handelSubmit">
				<text>提交</text>
			</view>
		</view>
		<view class="main" v-show="sectionCurrent === 1">
			<view class="radius bg-white list-item" v-for="item in list" :key="item.id">
				<view class="flex align-center justify-between">
					<text class="f-s15 text-bold">{{item.type_name}}</text>
					<text class="f-s14" v-if="item.reply">已回复</text>
					<text class="f-s14 text-gray" v-if="!item.reply">暂未回复</text>
				</view>
				<view class="m-t8 text-gray f-s12">
					<text>{{item.create_time}}</text>
				</view>
				<view class="m-t8 f-s14 flex align-center">
					<view class="round width-6 height-6 bg-black m-r8 shrink-0"></view>
					<text>{{item.content}}</text>
				</view>
				<view class="m-t8 f-s14 flex align-center" v-if="item.reply">
					<view class="round width-6 height-6 bg-theme m-r8 shrink-0"></view>
					<text>{{item.reply}}</text>
				</view>
				<view class="m-t10">
					<image @click="handlePreImage(item.images,imageIndex)" v-for="(imageItem,imageIndex) in item.images"
						:key="imageItem" :src="imageItem" mode="" style="width: 210rpx;height: 210rpx;"
						class="radius-6 bg-gray"></image>
				</view>
			</view>
			<view class="padding-tb-xs" v-if="total !== 0">
				<u-loadmore :status="loadmoreStatus" line @loadmore="handleScrollBottom" />
			</view>
			<Empty :show="total === 0"></Empty>
		</view>
		<Toast></Toast>
	</view>
</template>

<script>
	import subsection from "@/components/subsection/index.vue";
	import Empty from "@/components/empty/index.vue"
	import FormSelect from '@/components/form-select'
	import FormInput from '@/components/form-input'
	import UploadImage from '@/components/upload-image/index.vue'
	import mixins from "@/mixins/index.js"
	import {
		feed,
		feedDict,
		feedList
	} from "@/api/mine"
	export default {
		components: {
			subsection,
			Empty,
			FormSelect,
			FormInput,
			UploadImage
		},
		mixins: [mixins],
		data() {
			return {
				form: {
					content: '',
					type: '',
					images: '',
				},
				list: [],
				queryParams: {
					limit: 10,
					page: 1
				},
				currentPicker: 0,
				columns: [],
				sectionCurrent: 0,
				sectionList: [{
					label: "意见反馈",
					value: 0
				}, {
					label: "反馈记录",
					value: 1
				}]
			};
		},
		onLoad() {
			this.getFeedDict()
		},
		computed: {
			pickerValue() {
				if (String(this.form.type) && this.columns.length) {
					return this.columns.find(item => item.id === this.form.type)?.name ?? ''
				}
				return ''
			}
		},
		methods: {
			handlePreImage(list = [], index = 0) {
				uni.previewImage({
					urls: list,
					current: index
				})
			},
			handlePickerConfirm() {
				if (!this.form.type) {
					this.form.type = this.columns?.[0]?.id ?? ''
					this.currentPicker = 0
				}
			},
			handlePickerChange(picker) {
				this.form.type = picker['detail']['value']['id']
				this.currentPicker = picker['detail']['index']
			},
			handleSecionChange(select) {
				this.sectionCurrent = select['value']
				if (this.sectionCurrent === 1) {
					this.queryParams.page = 1
					this.getList()
				}
			},
			getList() {
				feedList(this.queryParams).then(res => {
					let {
						data: {
							list,
							count,
							total
						}
					} = res
					this.total = count || 0
					this.pageTotal = total || 0
					if (this.queryParams.page === this.pageTotal) this.loadmoreStatus = 'nomore'
					if (this.queryParams.page === 1) {
						this.list = list
					} else if (this.queryParams.page < this.pageTotal) {
						this.list = this.list.concat(list)
					}
				})
			},
			getFeedDict() {
				feedDict().then(res => {
					this.columns = res.data
				})
			},
			handelSubmit() {
				this.$modal.loading("正在提交").then(() => {
					feed(this.form).then(res => {
						this.$modal.closeLoading()
						this.$toast(res.msg)
					}).catch(() => this.$modal.closeLoading())
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/css/var.scss';
	.container {
		background-color: inherit;

		.header {
			padding: 20rpx 24rpx;
			position: sticky;
			@include sticky-top;
			z-index: 99;
			background-color: inherit;
		}

		.bottom-button {
			@include fixed-bottom;
		}

		.main {
			padding: 0 24rpx 20rpx 24rpx;

			.list-item {
				padding: 24rpx;
				margin-bottom: 20rpx;

				.tag {
					font-weight: 400;
					font-size: 22rpx;
					color: #FE3F59;
					line-height: 32rpx;
					border-radius: 4rpx;
					border: 1rpx solid #FE3F59;
					text-align: center;
					padding: 0 6rpx;
					margin-left: 12rpx;
				}
			}
		}
	}

	::v-deep .u-upload__wrap__preview {
		margin: 0;
	}
</style>